<template>
    <div class="GlobeInterior">
        <cesium-viewer @viewerAlready="viewerAlready">
        </cesium-viewer>
        <div class="selectOption">
            <label>
                <el-select v-model="value" placeholder="请选择" @change="change">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </label>
        </div>
    </div>
</template>

<script>
    import CesiumViewer from "../../CesiumViewer";

    export default {
        name: "GlobeInterior",
        //import引入的组件需要注入到对象中才能使用",
        components: {CesiumViewer},
        data() {
            //这里存放数据",
            return {
                options: [{
                    value: 'InnerCore',
                    label: '内核'
                }, {
                    value: 'OuterCore',
                    label: '外核'
                }, {
                    value: 'Mantle',
                    label: '地幔'
                }],
                value: ''
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            viewerAlready() {
                this.useTranslucencyMask();
                this.CoreAdd();
            },
            useTranslucencyMask() {
                let scene = viewer.scene;
                let globe = scene.globe;
                let baseLayer = viewer.scene.imageryLayers.get(0);
                globe.showGroundAtmosphere = false;  //关闭从 lightingFadeInDistance 和 lightingFadeOutDistance 之间的距离观察时绘制在地球上的地面大气。
                globe.baseColor = Cesium.Color.TRANSPARENT; //透明色
                globe.translucency.enabled = true; //用于控制地球透明度的属性
                globe.undergroundColor = undefined; //禁用地下着色

                // Set oceans on Bing base layer to transparent
                baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059); //水面用作Alpha的颜色
                baseLayer.colorToAlphaThreshold = 0.2; //颜色到Alpha的阈值
            },
            CoreAdd() {
                let innerCoreRadius = 1250000;
                let outerCoreRadius = 3450000;
                let mantleRadius = 6300000.0;
                let innerCore = viewer.entities.add({
                    id: "InnerCore",
                    position: Cesium.Cartesian3.ZERO, //（0.0，0.0，0.0）
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(
                            innerCoreRadius,
                            innerCoreRadius,
                            innerCoreRadius
                        ),
                        material: Cesium.Color.YELLOW,
                    },
                });
                let outerCore = viewer.entities.add({
                    id: "OuterCore",
                    position: Cesium.Cartesian3.ZERO,
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(
                            outerCoreRadius,
                            outerCoreRadius,
                            outerCoreRadius
                        ),
                        material: Cesium.Color.ORANGE,
                    },
                });
                let mantle = viewer.entities.add({
                    id: "Mantle",
                    position: Cesium.Cartesian3.ZERO,
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(
                            mantleRadius,
                            mantleRadius,
                            mantleRadius
                        ),
                        material: Cesium.Color.RED,
                    },
                });
                innerCore.show = false;
                outerCore.show = false;
                mantle.show = false;
            },
            change(id) {
                viewer.entities.getById("InnerCore").show = false;
                viewer.entities.getById("OuterCore").show = false;
                viewer.entities.getById("Mantle").show = false;
                viewer.entities.getById(id).show = true;
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    .GlobeInterior {
        position: relative;
    }

    .selectOption {
        position: absolute;
        z-index: 1001;
        top: 5px;
        left: 5px;
    }
</style>

